<template>
	<view style="display: flex;flex-direction: column;height: 100vh;background-color: #eaeaea;">
		<!-- 图片 -->
		<div style="width: 100%;height: 400rpx;display: flex;justify-content: center;">
			<img src="https://img0.baidu.com/it/u=4250457104,1299502980&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
				style="width: 95%;height: 400rpx;display: flex;">
		</div>
		<!-- 内容 -->
		<div class="aa">
			<div v-for="(item,index) in xing" :key="index">
				<div class="SC">
					<img :src="item.xin" style="width: 40rpx;height: 40rpx;">
					<div class="FS">
						{{item.sc}}
					</div>
				</div>
			</div>
			<div v-for="(item,index) in zip" :key="index">
				<div class="Scc">
					<img :src="item.jpg" style="width: 40rpx;height: 40rpx;">
					<div class="Fss">
						{{item.abc}}
					</div>
				</div>
			</div>
		</div>
		<!-- 元  -->
		<div style="display: flex;justify-content: center;">
			<div style="width: 95%;color: #aaaaff;">
				<div>￥</div>
			</div>
		</div>
		<!-- 购买 -->
		<div style="display: flex;justify-content: center;">
			<div class="GM">
				<div>￥7</div>
				<!-- <div v-for="(item,index) in gm" :key="index">
					<div style="display: flex;flex-direction: row;">
						<div class="QI">
							{{item.qiyu}}
						</div>
						<div class="MG">
							{{item.mg}}
						</div>
					</div>
				</div> -->
			</div>
			<div style="color: #9e9e9e;width: 13%;">人购买</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xing: [
					{ id: 1, xin: '/static/星星.png', sc: '分享' }

				],
				zip: [
					{ id: 2, jpg: '/static/星星.png', abc: '收藏' }
				],
				// gm: [
				// 	{ id: 1, qiyu: '￥7', mg: '人购买' }
				// ]
			}
		},
		methods: {

		}
	}

</script>

<style>
	.aa {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		/* background-color: #ffaaff; */
		width: 100%;
		height: 110rpx;
	}

	.SC {
		display: flex;
		flex-direction: column;
		width: 80rpx;
		height: 140rpx;
		/* background-color: aqua; */
		align-items: center;

	}

	.FS {
		width: 30rpx;
		height: 100rpx;
		display: flex;

	}

	.Scc {
		display: flex;
		flex-direction: column;
		width: 80rpx;
		height: 140rpx;
		/* background-color: aqua; */
		align-items: center;
		padding: ;

	}

	.Fss {
		width: 30rpx;
		height: 100rpx;
		display: flex;

	}

	.GM {
		display: flex;
		flex-direction: row;
		width: 82%;
		height: 40rpx;
		color: #9e9e9e;
		/* justify-content: flex-end; */
		/* justify-content: space-around; */
		/* background-color: #00ff7f; */
	}

	/* .QI {
		background-color: #ffaaff;

	}

	.MG {
		background-color: aqua;
	} */

</style>

